import { ref, watch } from 'vue'
import { useBasicData } from '@/store/index'

export function useContentHeight(dynamicHeight = 120) {
  const basicData = useBasicData()
  let tableMaxHeight = ref(0)

  watch(
    () => basicData.contentHeight,
    (newVal) => {
      if (!newVal) return
      const headerHeight = 102
      tableMaxHeight.value = newVal - dynamicHeight - headerHeight
      if (tableMaxHeight.value < 0) {
        tableMaxHeight.value = 200
      }
    },
    {
      deep: true, // 深度监听
      immediate: true // 立即监听 (一进入页面就会监听到)
    }
  )

  return tableMaxHeight
}
